第二章：選擇器（1）

第 11 屆 iThome 鐵人賽

DAY 3

Modern Web

CSS大全閱讀筆記系列第 3 篇

11th鐵人賽

Camellus

2019-09-19 23:14:25

802 瀏覽

分享至

基本樣式規則：
a. h2 {color: red;}
b. HTML文件裡的HTML元素就是最基本的選擇器（元素選擇器），寫在左側，右側為宣告區塊，以大括弧包住。
c. 宣告區塊內可含多個宣告，宣告的格式為屬性加上冒號後接設定值，最後以分號作結，冒號和分號後可接數個空白。
d. 宣告中的設定值一般一個或數個以空白分隔關鍵字，其中有些特例的關鍵字也能以斜線分隔，像是h2 {font: large/150% sans-serif}（background、border-radius也屬此類），或者用逗號區隔，如linear-gradient。
e. 宣告中只要屬性名稱或設定值錯誤，該宣告就不會有作用。
群組
a. 群組選擇器：
- 將一個樣式套用到多個元素，可大幅減少樣式表。
- 以逗號分隔，少了逗號會造成完全不同的意義（會變成後裔選擇器）。
- h1, p {color: red;}＝h1{color: red;} p{color: red;}
b. 通用選擇器：
- 用星號（*）表示，會對應到所有的元素，寫法為：* {color: red;}（即表示所有color屬性的設定值都為red）。
- 權重為0-0-0，且可能會造成預期外的效果，所以要慎用。
c. 群組宣告：
- h1 {color: red; font-size: 12px;}＝h1{color: red;} h1{font-size: 12px}
- 將同一選擇器的宣告，寫至同一個宣告區域（大括弧）中。
- 每一個宣告後要以分號作結，才能再寫下一個宣告，否則很可能因為缺少分號，導致不合法設定值，造成宣告被忽略。
d. 老瀏覽器裡的新元素：
- 利用JS中的document.createElement('新元素')在DOM裡建立新元素，使舊瀏覽器也能使用HTML5的新增元素：
- 寫法：（寫在JS檔案裡）document.createElement('main')
類別與ID選擇器：
a. HTML文件需要有適當的標記，才能使用，且標記有大小寫之分。
b. 使用ID、類別、屬性選擇器、虛擬類別或虛擬元素選擇器，卻不指定元素時，預設會加上通用選擇器（*），例如*#lead {color: red;}，通用選擇器可以省略（不顯示）。
c. 類別選擇器（class）：
- 可與元素選擇器共用，限定元素中有標記的部分使用樣式表，用半形句號隔開，寫法為p.first {color: blue;}
- 也可單獨對所有標記的部分使用樣式表，以半形句號為開頭，寫法為.first {color: blue;}
- 多重類別：HTML允許class屬性使用多個設定值，各值間以空白隔開，設定值的順序不會影響結果，如<p class="daily homework">......</p>，可以對daily和homework兩個class個別設定樣式表，結果p會顯示兩個樣式表的設定。
d. ID選擇器：
- 寫法：#lead {font-size: 19px;}
- 以井字號開頭，一份文件中只會出現一次。
e. 使用類別或ID選擇器：
- 類別可以指給多個元素，ID一份文件中只能出現一次（實際上出現ID賦予多個元素是可以成立的，但那並不正確）。
- ID屬性不允許空白分隔的多重值，因此ID選擇器不能和其他ID選擇器對同一元素使用，類別屬性則無此限制。
- ID和類別屬性出現在同一元素時，ID優先權較高。